<template>
  <el-dialog title="编辑学校" :close-on-click-modal="false" :visible="show" @close="closes" width="500px" v-el-drag-dialog>
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleForm">
      <el-form-item label="地区: " prop="area">
        <el-cascader style="width: 100%;" size="small" v-model="form.area" :options="areaList" v-if="editAreaShow"
          :show-all-levels="true" :props="{ label: 'areaName', value: 'areaCode', children: 'childs', emitPath: 'true' }"
          @change="changes"></el-cascader>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closes" size="small" type="grey">取 消</el-button>
      <el-button type="purple" size="small" @click="btnClick">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { areaData } from '@/utils/eara';
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    updaterel: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      editAreaShow: false,
      form: {
        area: [],
      },
      areaList: areaData,
      rules: {
        area: [{ required: true, message: '请选择地区', trigger: 'change' }]
      }
    }
  },
  watch: {
    show(val) {
      if (val) {
        // 控制它重新加载
        setTimeout(() => {
          this.editAreaShow = true;
        },1)
        this.form = {
          area: this.updaterel.areaCode.split(',')
        }
      }
    }
  },
  methods: {
    // 弹窗关闭
    closes() {
      this.form = {
        area: []
      }
      // 清空验证
      this.$refs.ruleForm.resetFields();
      this.$emit('update:show', false);
    },
    changes(val) {
      console.log(val)
    },
    btnClick() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
            this.closes();
            this.$emit('reload');
        }
      })
    }
  },
  mounted() { }
}
</script>

<style scoped lang="scss"></style>